<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>scale</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      .box {
        width: 200px;
        height: 200px;
        background-color: #f00;
        margin: 200px auto;

        /*缩放 scale(x,y) 横向缩放x倍，纵向缩放y倍*/
        -webkit-transform: scale(2, 0.5);
        -moz-transform: scale(2, 0.5);
        -ms-transform: scale(2, 0.5);
        -o-transform: scale(2, 0.5);
        transform: scale(2, 0.5);

        /*scale（n） x，y轴都放大n倍*/
        -webkit-transform: scale(1.5);
        -moz-transform: scale(1.5);
        -ms-transform: scale(1.5);
        -o-transform: scale(1.5);
        transform: scale(1.5);

        /*scaleX(n) 横向缩放n倍 纵向保持不变*/
        /*scaleY(n) 纵向缩放n倍 横向保持不变*/
        /*-webkit-transform: scaleX(1.5);
        -moz-transform: scaleX(1.5);
        -ms-transform: scaleX(1.5);
        -o-transform: scaleX(1.5);
        transform: scaleX(1.5);*/
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>
